<!DOCTYPE html>
<html>
<?php
// 启动会话
session_start();
?>

<script>
  function userIsLoggedIn() {
    // 在这里实现用户登录状态的检查逻辑
    // 返回值为布尔值，true 表示用户已登录，false 表示用户未登录
    // 示例：检查用户是否具有有效的登录凭据
    // 这里改为检查会话中的登录状态
    return <?php echo isset($_SESSION['loggedin']) && $_SESSION['loggedin'] ? 'true' : 'false'; ?>;
  }

  // 在页面加载时检查用户登录状态
  window.addEventListener('DOMContentLoaded', function() {
    if (!userIsLoggedIn()) {
      window.location.href = 'Login.php'; // 请将 'login.html' 替换为您实际的登录页面路径
    }
  });
</script>

<head>
  <meta charset="utf-8" />
  <title>酒店后台大数据可视化展示</title>
  <!-- ========== FAVICON ========== -->
  <link rel="apple-touch-icon-precomposed" href="images/favicon-apple.png" />
  <link rel="icon" href="images/favicon.png" />
  <!-- ========== STYLESHEETS ========== -->
  <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <link href="revolution/css/layers.css" rel="stylesheet" type="text/css" />
  <link href="revolution/css/settings.css" rel="stylesheet" type="text/css" />
  <link href="revolution/css/navigation.css" rel="stylesheet" type="text/css" />
  <link href="css/bootstrap-select.min.css" rel="stylesheet" type="text/css" />
  <link href="css/animate.min.css" rel="stylesheet" type="text/css" />
  <link href="css/famfamfam-flags.css" rel="stylesheet" type="text/css" />
  <link href="css/magnific-popup.css" rel="stylesheet" type="text/css" />
  <link href="css/owl.carousel.min.css" rel="stylesheet" type="text/css" />
  <link href="css/style.css" rel="stylesheet" type="text/css" />
  <link href="css/responsive.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="css/backend01.css" />
  <!-- ========== ICON FONTS ========== -->
  <link href="fonts/font-awesome.min.css" rel="stylesheet" />
  <link href="fonts/flaticon.css" rel="stylesheet" />
  <!-- 数据可视化 -->
  <script type="text/javascript" src="dataVisualization/js/jquery.js"></script>

  <link rel="stylesheet" href="dataVisualization/css/comon0.css" />
  <style>
    /* 添加全屏样式 */
    .fullscreen {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 9999;
    }

    /* 添加关闭样式 */
    .closebtn {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 99999;
      cursor: pointer;
    }

    /* 隐藏浏览器自带全屏按钮 */
    :-webkit-full-screen-button {
      display: none;
    }

    /* 全屏按钮样式 */
    #fullscreenbtn {
      padding: 10px 20px;
      background-color: #4caf50;
      color: white;
      border: none;
      cursor: pointer;
      border-radius: 5px;
      margin-right: 10px;
    }

    /* 关闭按钮样式 */
    #closebtn {
      padding: 10px 20px;
      background-color: #f44336;
      color: white;
      border: none;
      cursor: pointer;
      border-radius: 5px;
    }
  </style>
</head>
<script>
  $(window).load(function() {
    $(".loading").fadeOut();
  });

  /****/
  $(document).ready(function() {
    var whei = $(window).width();
    $("html").css({
      fontSize: whei / 20
    });
    $(window).resize(function() {
      var whei = $(window).width();
      $("html").css({
        fontSize: whei / 20
      });
    });
  });
</script>
<script type="text/javascript" src="dataVisualization/js/echarts.js"></script>
<script src="dataVisualization/js/backend03_bigimg.js.js"></script>
<script language="JavaScript" src="dataVisualization/js/backend03.js.js"></script>

<body>
  <div id="smoothpage" class="wrapper">
    <!-- ========== TOP MENU ========== -->
    <div class="top_menu">
      <div class="container" style="font-size: 15px !important">
        <div class="welcome_mssg hidden-xs">欢迎登录青云庭院酒店后台</div>
        <ul class="top_menu_right">
          <li>
            <i class="fa fa-phone"></i><a href="tel:18475555555"> 1-888-123-4567 </a>
          </li>
          <li class="email hidden-xxs">
            <i class="fa fa-envelope-o"></i>
            <a href="mailto:contact@site.com">contact@site.com</a>
          </li>
          <li class="language-switcher">
            <nav class="dropdown">
              <a href="#" class="dropdown-toggle select" data-hover="dropdown" data-toggle="dropdown">
                <i class="famfamfam-flag-cn"></i>中国<b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="#"><i class="famfamfam-flag-us"></i>美国</a>
                </li>
                <li>
                  <a href="#"><i class="famfamfam-flag-de"></i>德国</a>
                </li>
                <li>
                  <a href="#"><i class="famfamfam-flag-jp"></i>日本</a>
                </li>
                <li>
                  <a href="#"><i class="famfamfam-flag-ru"></i>俄罗斯</a>
                </li>
                <li>
                  <a href="#"><i class="famfamfam-flag-fr"></i>法国</a>
                </li>
                <li>
                  <a href="#"><i class="famfamfam-flag-no"></i>挪威</a>
                </li>
                <li>
                  <a href="#"><i class="famfamfam-flag-sg"></i>新加坡</a>
                </li>
                <li>
                  <a href="#"><i class="famfamfam-flag-cn"></i>中国</a>
                </li>
              </ul>
            </nav>
          </li>
          <?php if (isset($_SESSION['loggedin']) && $_SESSION['loggedin'] === true) : ?>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-hover="dropdown"><i class="fa fa-user"></i> 欢迎，<?php echo $_SESSION['username']; ?></a>
            </li>
            <li><a href="logout.php"><i class="fa fa-sign-out"></i>退出</a></li>
          <?php else : ?>
            <li><a href="login.php">登录</a></li>
            <li><a href="login.php">注册</a></li>
          <?php endif; ?>
          <!-- <li><a href="backend01.php">酒店后台</a></li> -->
          <?php if (isset($_SESSION['loggedin']) && $_SESSION['loggedin'] === true && $_SESSION['role'] !== "顾客") : ?>
            <li><a href="backend01.php">酒店后台</a></li>
          <?php endif; ?>
        </ul>
      </div>
    </div>
    <!-- =========== PAGE TITLE ========== -->
    <div class="page_title gradient_overlay" style="background: url(images/page_title_bg.jpg)">
      <div class="container">
        <div class="inner">
          <div class="row">
            <div class="col-md-6 col-sm-6">
              <h1>青云庭院酒店后台</h1>
              <ol class="breadcrumb" style="font-size: 13px !important">
                <li><a href="index.php">主页</a></li>
                <li>
                  <a href="backend01.php" class="active">顾客与酒店数据</a>
                </li>
                <li><a href="backend02.php">酒店各项数据</a></li>
                <li><a href="backend03.php">销售数据</a></li>
                <li><a href="TestPage/房态查询页面.php">总后台管理</a></li>
              </ol>
            </div>
            <div class="col-md-6 col-sm-6">
              <h2 class="titleh3" style="float: right">祝你工作愉快 !</h2>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="bodys" id="carouselContent">
    <div class="loading">
      <div class="loadbox">
        <img src="dataVisualization/picture/loading.gif" /> 页面加载中...
      </div>
    </div>
    <div class="mainbox">
      <ul class="clearfix">
        <li>
          <div class="boxall" style="height: 3.5rem">
            <div class="alltitle">客房评分分布</div>
            <div class="allnav" id="echart16"></div>
            <div class="boxfoot"></div>
          </div>
          <div class="boxall" style="height: 3.5rem">
            <div class="alltitle">费用占比图</div>
            <div class="allnav" id="echart17"></div>
            <div class="boxfoot"></div>
          </div>
          <div class="boxall" style="height: 3.5rem">
            <div class="alltitle">酒店设备维修关系图</div>
            <div class="allnav" id="echart18"></div>
            <div class="boxfoot"></div>
          </div>
        </li>
        <li>
          <div class="bar">
            <!-- 全屏按钮 -->
            <div class="row">
              <div class="col-md-6">
                <span style="font-size: 15px; color: aliceblue">点击全屏</span>
                <button id="fullscreenbtn" style="font-size: 10px">
                  全屏
                </button>
                <button id="closebtn" style="display: none; font-size: 10px">
                  关闭
                </button>
              </div>
              <div class="col-md-6">

              </div>
            </div>
          </div>
          <div class="map">
            <div class="alltitle">青云庭院酒店-十年来各房型销售情况</div>
            <div class="allnav" id="bigmap3"></div>
          </div>
        </li>
        <li>
          <div class="boxall" style="height: 3.5rem">
            <div class="alltitle">月均服务差评好评量</div>
            <div class="allnav" id="echart13"></div>
            <div class="boxfoot"></div>
          </div>
          <div class="boxall" style="height: 3.5rem">
            <div class="alltitle">酒店组织架构</div>
            <div class="allnav" id="echart14"></div>
            <div class="boxfoot"></div>
          </div>
          <div class="boxall" style="height: 3.5rem">
            <div class="alltitle">房价与入住率</div>
            <div class="allnav" id="echart15"></div>
            <div class="boxfoot"></div>
          </div>
        </li>
      </ul>
    </div>
    <div class="back"></div>
  </div>

  <!-- ========== FOOTER ========== -->
  <footer>
    <div class="inner" style="margin-top: 5px !important">
      <div class="container">
        <div class="row">
          <div class="col-md-3 col-sm-6 widget">
            <div class="about">
              <a href="index.php"><img class="logo" src="images/logo.svg" height="32" alt="Logo" /></a>
              <p>
                “绿树掩映，清风拂面，尽享雅致之旅。欢迎莅临我们的酒店，体验至臻奢华与无与伦比的服务。让我们将您的每一个细节需求化为巧夺天工的菁华。
              </p>
              <p>
                为您营造一个温馨、舒适的家外之家。无论是商务旅行还是休闲度假，我们的酒店始终以您的满意为首要目标。
              </p>
            </div>
          </div>
          <div class="col-md-3 col-sm-6 widget">
            <h5>最新消息</h5>
            <ul class="blog_posts">
              <li>
                <a href="blog-post.php">在希腊活出你的神话</a>
                <small>AUGUST 13, 2017</small>
              </li>
              <li>
                <a href="blog-post.php">青云庭院图片</a>
                <small>AUGUST 16, 2017</small>
              </li>
              <li>
                <a href="blog-post.php">青云庭院家庭聚会</a>
                <small>SEPTEMBER 15, 2017</small>
              </li>
            </ul>
          </div>
          <div class="col-md-3 col-sm-6 widget">
            <h5>相关链接</h5>
            <ul class="useful_links">
              <li><a href="#">关于我们</a></li>
              <li><a href="#">联系我们</a></li>
              <li><a href="#">历史</a></li>
              <li><a href="#">图库</a></li>
              <li><a href="#">位置</a></li>
            </ul>
          </div>
          <div class="col-md-3 col-sm-6 widget">
            <h5>联系我们</h5>
            <address>
              <ul class="address_details">
                <li>
                  <i class="glyphicon glyphicon-map-marker"></i> 25, Navagio
                  Zakynthos， 希腊
                </li>
                <li>
                  <i class="glyphicon glyphicon-phone-alt"></i> Phone:
                  +86-153-033-038
                </li>
                <li><i class="fa fa-fax"></i> Fax: 800 123 3456</li>
                <li>
                  <i class="fa fa-envelope"></i> Email:
                  <a href="mailto:info@site.com">contact@site.com</a>
                </li>
              </ul>
            </address>
          </div>
        </div>
      </div>
    </div>
    <div class="subfooter">
      <div class="container">
        <div class="row">
          <div class="col-md-6 col-sm-6">
            <div class="copyrights">
              Copyright &copy; 2023.Company name All rights reserved
            </div>
          </div>
          <div class="col-md-6 col-sm-6">
            <div class="social_media">
              <a class="facebook" data-original-title="Facebook" data-toggle="tooltip" href="#"><i class="fa fa-facebook"></i></a>
              <a class="twitter" data-original-title="Twitter" data-toggle="tooltip" href="#"><i class="fa fa-twitter"></i></a>
              <a class="googleplus" data-original-title="Google Plus" data-toggle="tooltip" href="#"><i class="fa fa-google-plus"></i></a>
              <a class="pinterest" data-original-title="Pinterest" data-toggle="tooltip" href="#"><i class="fa fa-pinterest"></i></a>
              <a class="linkedin" data-original-title="Linkedin" data-toggle="tooltip" href="#"><i class="fa fa-linkedin"></i></a>
              <a class="instagram" data-original-title="Instagram" data-toggle="tooltip" href="#"><i class="fa fa-instagram"></i></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </footer>
  <script>
    var fullscreenbtn = document.getElementById("fullscreenbtn");
    var closebtn = document.getElementById("closebtn");
    var bodys = document.querySelector(".bodys");

    // 点击全屏按钮
    fullscreenbtn.addEventListener("click", function() {
      // 进入全屏
      if (bodys.requestFullscreen) {
        bodys.requestFullscreen();
      } else if (bodys.mozRequestFullScreen) {
        bodys.mozRequestFullScreen();
      } else if (bodys.webkitRequestFullscreen) {
        bodys.webkitRequestFullscreen();
      } else if (bodys.msRequestFullscreen) {
        bodys.msRequestFullscreen();
      }
      // 显示关闭按钮
      fullscreenbtn.style.display = "none";
      closebtn.style.display = "inline-block";
      // 添加全屏样式
      bodys.classList.add("fullscreen");
    });

    // 点击关闭按钮
    closebtn.addEventListener("click", function() {
      // 退出全屏
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      }
      // 显示全屏按钮
      closebtn.style.display = "none";
      fullscreenbtn.style.display = "inline-block";
      // 移除全屏样式
      bodys.classList.remove("fullscreen");
    });
  </script>
</body>

</html>